<template>
  <div class="cartRoot">
    <div class="headerBox">
      <div class="leftBox">购物车（共{{ allNum }}款）</div>
      <div class="rightBox">
        已选{{ num }}款，合计（不含运费）
        <div class="price">￥{{ price }}</div>
        <div class="btnBox" @click="generateOrder">结算</div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="tableBox">
      <div class="tableHeder">
        <el-row :gutter="20">
          <el-col :span="2"
            ><div class="grid-content bg-purple">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
                >全选</el-checkbox
              >
            </div></el-col
          >
          <el-col :span="7"
            ><div class="grid-content bg-purple">商品</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">单价</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">规格属性</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">数量</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">小计</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">操作</div></el-col
          >
        </el-row>
      </div>
      <div class="tableCell">
        <div class="cellList" v-for="(item, index) in list" :key="index">
          <div class="cellHeader">
            <div class="cellLeft">
              <el-checkbox
                v-model="item.checked"
                :label="item"
                style="display: flex; padding-top: 6px"
                @change="checkChange(index)"
              >
                <div class="newDp">
                  <img
                    src="../../static/Imgs/userImg/dianpu.png"
                    class="dianpuImg"
                    alt=""
                  /></div
              ></el-checkbox>
              <div class="dataBox">店铺：{{item.children[0].storeName}}</div>
            </div>
          </div>
          <div
            class="tableContent"
            v-for="(item1, index1) in item.children"
            :key="item1.id"
          >
            <el-row :gutter="20">
              <el-col :span="2"
                ><div class="grid-content bg-purple">
                  <el-checkbox
                    @change="newCheck(item1.checked, item1.id)"
                    v-model="item1.checked"
                    style="display: flex; padding-top: 6px; margin-top: 30%"
                  >
                    <div class="newDpS"></div
                  ></el-checkbox></div
              ></el-col>
              <el-col :span="7"
                ><div class="grid-content bg-purple">
                  <div class="shopsData" @click="$router.push({
                path:'/detail',
                query:{
                  id:item1.productId
                }
              })">
                    <img :src="item1.productPic" class="newImg" alt="" />
                    <div class="shopsDataBox">
                      <div class="nameBox">{{ item1.productName }}</div>
                      <div class="Model">商品货号：{{ item1.productCode }}</div>
                      <div class="Model">
                        颜色：{{ item1.productSkuData.color }} 尺码：{{
                          item1.productSkuData.size
                        }}
                      </div>
                    </div>
                  </div>
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple">
                  <div class="price">￥{{ item1.price }}</div>
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple">
                  <div class="price">
                    颜色：{{ item1.productSkuData.color }}
                  </div>
                  <div class="price">尺码：{{ item1.productSkuData.size }}</div>
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple">
                  <el-input-number
                    size="mini"
                    :min="0"  
                    v-model="item1.quantity"
                    @change="updateCartItemQuantity(item1.id, item1.quantity)"
                  ></el-input-number></div
              ></el-col>

              <el-col :span="3">
                <div class="redPrice">
                  ￥{{ item1.quantity * item1.price }}
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple">
                  <div class="Controls">
                    <div class="conteolsLeft">
                      <el-button
                        type="text"
                        @click="danDel(item1.id)"
                        class="noneColor"
                        >删除</el-button
                      >
                      <el-button
                        v-if="!item1.collection"
                        type="text"
                        class="noneColor"
                        @click="dgsc(item1.productId)"
                        >添加到收藏</el-button
                      >
                      <el-button
                        v-else
                        type="text"
                        class="noneColor"
                        @click="deleteProductCollection(item1.productId)"
                        >取消收藏</el-button
                      >
                    </div>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="headerBox">
      <div class="leftBox">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-button type="text" class="newBtn" @click="dialogVisible = true"
          >删除</el-button
        ><el-button type="text" class="newBtn" @click="saveProductCollection">添加到收藏</el-button>
      </div>
      <div class="rightBox">
        已选{{ num }}款，合计（不含运费）
        <div class="price">￥{{ price }}</div>
        <div class="btnBox" @click="generateOrder">结算</div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">确认删除</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="text">确认要在购物车中删除此商品嘛？</div>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button
          type="primary"
          class="hongBtn"
          @click="deleteProductInCartItem"
        >
          确定</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  selectMemberCartItemList,
  deleteProductInCartItem,
  updateCartItemQuantity,
  updateCartItemChecked,
  generateOrder,
  saveProductCollection,
  deleteProductCollection,
} from "@/api/shopDetail";
export default {
  data() {
    return {
      danId: null,
      dialogVisible: false,
      checkAll: false,
      list: [
        {
          checked: false,
          children: [
            {
              checked: false,
              name: "商品1",
              id: 0,
            },
            {
              checked: false,
              name: "商品2",
              id: 1,
            },
          ],
        },
        {
          checked: false,
          children: [
            {
              checked: false,
              name: "商品1",
              id: 3,
            },
          ],
        },
      ],
      num: 0,
      price: 0,
      allNum: 0,
      keyWord:''
    };
  },
  // created() {
  //   this.selectMemberCartItemList();
  // },
  created() {
    
    this.selectMemberCartItemList();
  },
  methods: {
    //添加单个收藏
    dgsc(id) {
      saveProductCollection({
        idList: id,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "收藏成功",
            type: "success",
          });
          this.selectMemberCartItemList();
        }
      });
    },
    //取消收藏
    deleteProductCollection(id) {
      deleteProductCollection({
        idList: id,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "取消成功",
            type: "success",
          });
          this.selectMemberCartItemList();
        }
      });
    },
    //收藏商品
    saveProductCollection() {
      let arr = [];
      this.list.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.checked) {
            arr.push(item1.productId);
          }
        });
      });
      if(arr.length==0){
        this.$message({
          message: '请选择需要操作的商品',
          type: 'warning'
        });
        return false
      }
      saveProductCollection({
        idList: arr.join(","),
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "收藏成功",
            type: "success",
          });
          this.selectMemberCartItemList();
        }
      });
    },
    //单个删除
    danDel(id) {
      this.dialogVisible = true;
      this.danId = id;
    },
    //结算生成订单
    generateOrder() {
      let arr = [];
      this.list.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.checked) {
            arr.push(item1.id);
          }
        });
      });
      // localStorage.setItem('data',JSON.stringify(arr))
      // this.$router.push({
      //       path: "/OrderProcess",
      //       query: {
      //         data: data.data.orderList.id,
      //       },
      //     });
      if(!arr.length){
        this.$message({
          message: '请选择需要结算的商品',
          type: 'warning'
        });
        return false
      }
      generateOrder({
        cartItemIds: arr.join(","),
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.push({
            path: "/OrderProcess",
            query: {
              id: data.data.orderList.id,
            },
          });
        }
      });
    },
    //修改购物车商品选中状态
    updateCartItemChecked(val, arr) {
      updateCartItemChecked({
        cartItemIds: arr.join(","),
        checked: val,
      });
    },
    // 修改购物车商品数量
    updateCartItemQuantity(id, num) {
      updateCartItemQuantity({
        cartItemId: id,
        quantity: num,
      }).then((data) => {});
    },
    //删除商品
    deleteProductInCartItem() {
      let arr = [];
      this.list.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.checked) {
            arr.push(item1.id);
          }
        });
      });
      deleteProductInCartItem({
        ids: this.danId ? this.danId : arr.join(","),
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.selectMemberCartItemList();
          this.dialogVisible = false;
          this.danId = null;
        }
      });
    },
    //获取购物车列表
    selectMemberCartItemList() {
      this.allNum=0
      this.price=0
      selectMemberCartItemList(
        {
          keyWord:this.keyWord
        }
      ).then((data) => {
        data.data.forEach((item) => {
          item.children.forEach((item1) => {
            item1.productSkuData = JSON.parse(item1.productSkuData);
          });
        });
        this.list = data.data;
        this.num = 0;
        this.list.forEach((item) => {
          this.allNum = item.children.length + this.allNum;
          let checked = true;
          item.children.forEach((item1) => {
            if (!item1.checked) {
              checked = false;
            }
            if (item1.checked) {
              this.num = this.num + 1;
              this.price = this.price + item1.quantity * item1.price;
            }
          });
          item.checked = checked;
          let allChecked = true;
          if (!item.checked) {
            allChecked = false;
          }
          this.checkAll = allChecked;
        });
        console.log(this.list);
      });
    },
    handleCheckAllChange(val) {
      console.log(val);
      if (val) {
        this.list.forEach((item) => {
          item.checked = true;
          item.children.forEach((item1) => {
            item1.checked = true;
          });
        });
        console.log(this.list);
      } else {
        this.list.forEach((item) => {
          item.checked = false;
          item.children.forEach((item1) => {
            item1.checked = false;
          });
        });
      }

      this.num = 0;
      this.price = 0;
      let arr = [];
      this.list.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.checked) {
            this.num = this.num + 1;
            this.price = this.price + item1.quantity * item1.price;
          }
          arr.push(item1.id);
        });
      });
      this.updateCartItemChecked(val, arr);
    },
    checkChange(val) {
      let arr = [];
      if (this.list[val].checked) {
        this.list[val].children.forEach((item) => {
          item.checked = true;
          arr.push(item.id);
        });
        this.updateCartItemChecked(true, arr);
      } else {
        this.list[val].children.forEach((item) => {
          item.checked = false;
          arr.push(item.id);
        });
        this.updateCartItemChecked(false, arr);
      }
      this.num = 0;
      this.price = 0;
      this.list.forEach((item) => {
        let checked = true;
        item.children.forEach((item1) => {
          if (!item1.checked) {
            checked = false;
          }
          if (item1.checked) {
            this.num = this.num + 1;
            this.price = this.price + item1.quantity * item1.price;
          }
        });
        item.checked = checked;
        let allChecked = true;
        if (!item.checked) {
          allChecked = false;
        }
        this.checkAll = allChecked;
      });
    },
    newCheck(val, id) {
      this.num = 0;
      this.price = 0;
      this.list.forEach((item) => {
        let checked = true;
        item.children.forEach((item1) => {
          if (!item1.checked) {
            checked = false;
          }
          if (item1.checked) {
            this.num = this.num + 1;
            this.price = this.price + item1.quantity * item1.price;
          }
        });
        item.checked = checked;
        let allChecked = true;
        if (!item.checked) {
          allChecked = false;
        }
        this.checkAll = allChecked;
      });
      this.updateCartItemChecked(val, [id]);
    },
  },
};
</script>

<style scoped lang="scss">
/deep/ .el-divider {
  margin: 10px 0;
}
.cartRoot {
  .headerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.2rem;
    .leftBox {
      font-weight: 700;
      font-size: 0.18rem;
      .newBtn {
        margin-left: 0.2rem;
        color: #606266;
      }
    }
    .rightBox {
      font-size: 0.1rem;
      display: flex;
      align-items: center;
      .price {
        color: #e22a1f;
        font-weight: 700;
        margin-left: 0.2rem;
        font-size: 0.18rem;
        font-family: "D-DIN-Bold";
      }
      .btnBox {
        background: #e22a1f;
        color: #fff;
        margin-left: 0.2rem;
        font-size: 0.17rem;
        border-radius: 40px;
        width: 0.85rem;
        height: 0.35rem;
        text-align: center;
        line-height: 0.35rem;
        cursor: pointer;
      }
    }
  }
  .tableBox {
    padding: 0 0.2rem;
    padding-bottom: 10px;
    .tableHeder {
      margin-top: 20px;

      padding: 12px;
      font-size: 14px;
    }
    .tableCell {
      margin-top: 5px;
      .cellList {
        margin-bottom: 10px;
        background: #ebeff5;
        border-radius: 2px;
      }
      .cellHeader {
        padding: 12px;
        display: flex;
        justify-content: space-between;
        .cellLeft {
          display: flex;
          align-items: center;

          .dianpuImg {
            width: 0.15rem;
            height: 0.15rem;
          }
        }
        .dataBox {
          font-size: 14px;
          color: #666666;
          margin-left: 10px;
        }
        .newDataBox {
          margin-left: 50px;
        }
      }
      .tableContent {
        padding: 15px;
        font-size: 14px !important;
        border-bottom: 1px solid #e8e8e8;
        .newDpS {
          width: 0.1rem;
          height: 0.1rem;
          background: #ebeff5;
        }
        .shopsData {
          display: flex;
          cursor:pointer;
          .newImg {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
          .shopsDataBox {
            margin-left: 10px;
            .nameBox {
              font-size: 14px;
            }
            .Model {
              color: #999999;
              margin-top: 12px;
              font-size: 12px;
            }
          }
        }
        .price {
          color: #666666;
          margin-bottom: 0.1rem;
        }
        .ActualPayment {
        }
        .Controls {
          display: flex;
          justify-content: space-between;
          /deep/ .el-button {
            display: block;
            margin-left: 0;
          }
          .qiziImg {
            width: 24px;
            height: 24px;
            margin-right: 20px;
            cursor: pointer;
          }
        }
        /deep/ .el-input-number {
          width: 80%;
        }
        /deep/ .el-input-number--mini {
          line-height: 33px;
        }
        .redPrice {
          color: #e22a1f;
          font-size: 0.15rem;
        }
        /deep/ .noneColor {
          color: #666;
          padding-top: 0;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    height: 10vh;
    display: flex;
    align-items: center;
    .text {
      width: 100%;
      text-align: center;
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
 /deep/ .el-input__inner{
  height: 0.45rem !important;
 }
}
</style>